<template>
	<div class="box" style="background: var(--background_box) !important;padding: 10px;" :style="[style]">
		<div class="header_time">
			<div class="left" style="text-align: left;" @click='last'>
				<img src="../../../static/箭头_页面_向左_o.svg" alt="" />
			</div>
			<div class="time" @click='selectHeader'>
				<strong>{{timeObj.month < 10 ? '0' + timeObj.month : timeObj.month}}月</strong>
				<p>{{timeObj.year}}年</p>
			</div>
			<div class="right" style="text-align: right;" @click='next'>
				<img src="../../../static/箭头_页面_向右_o.svg" alt="" />
			</div>
		</div>

		<!-- 收入 支出 金额 -->
		<div class="inc_exp_mone">
			<div class="inc" @click="click_zc_sr('01')" :class="type == '01' ? 'inc active_boxKb' : 'inc'">
				<div class="inc_exp_title">
					<img src="../../../static/收入支出分析.svg" alt="" />
					<span>支出</span>
				</div>

				<div class="number" style="font-size: 16px;" v-if="type == '02'">------</div>
				<div class="number" v-else>$ {{display_board_obj.amountPaid}}</div>
				<div class="number" style="font-size: 12px;margin-top: 5px;">总数：{{expenditure_quantity}}笔</div>
			</div>

			<div class="exp" @click="click_zc_sr('02')" :class="type == '02' ? 'inc active_boxKb' : 'inc'">
				<div class="inc_exp_title">
					<img src="../../../static/收入.svg" alt="" />
					<span>收入</span>
				</div>
				<div class="number" style="font-size: 16px;" v-if="type == '01'">------</div>
				<div class="number" v-else>$ {{display_board_obj.income}}</div>
				<div class="number" style="font-size: 12px;margin-top: 5px;">总数：{{income_quantity}}笔</div>

			</div>
		</div>


		<!-- 明细 -->
		<ul class="list">
			<li v-for="item,index in billList" :key="index">
				<p class="time_class">
					<span>{{item.createTime}} {{item.createTime == timeIng ? '今天' : ''}}</span>
					<span>支：{{(item.amountPaid).toFixed(2)}} 收：{{(item.income).toFixed(2)}}</span>
				</p>

				<div class="detail" v-for="row in item.list" :key="row._id" @click='editBill(row)'
					@longpress="longpress(row)">
					<div class="image">
						<img :src="row.iconImage" alt="">
					</div>
					<div class="centent">
						<h3>{{row.title}} <span>· {{row.time}}</span></h3>
						<p>{{row.remark}}</p>
					</div>
					<div class="number">
						<h3 :style="{color:`${row.type == '02' ? '#1AA034' : ''}`}">
							{{row.type == '01' ? '- $' : '+ $'}}{{(Number(row.money)).toFixed(2)}}
						</h3>
						<p>{{row.typeName}}</p>
					</div>
				</div>

			</li>

			<!-- 空状态 -->
			<div class="empty" v-if="billList.length == 0">
				<img src="../../../static/空状态.svg" alt="">
				<p>空空如也</p>
			</div>
		</ul>

		<!-- 按钮 -->
		<!-- <button class="addbtn" @click='showSelectIcon'> <van-icon name="edit" style="margin-right: 10px;" />
			记一笔
		</button> -->

		<!-- 控制台 -->
		<div class="control_panel" :style="{height:`${isLook ? '50px' : '200px'}`}">

			<!-- 用来显示隐藏的盒子 -->
			<div class="phanerozoite">

				<!-- 统计按钮 -->
				<img @click='lookStatistics'
					src="https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/账单Icon/统计1.svg"
					alt="">


				<!--  添加按钮 -->
				<img @click='showSelectIcon'
					src="https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/账单Icon/新增.svg"
					alt="">

				<!-- 切换主题 -->
				<img @click='vutTheme' v-show="at == 'daytime'"
					src="https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/账单Icon/白天.svg"
					alt="">
				<img @click='vutTheme' v-show="at == 'night'"
					src="https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/账单Icon/晚上.svg"
					alt="">
			</div>

			<!-- 查看全部 -->
			<div class="lookAll" @click='isLook = !isLook'>
				<!-- 向上 -->
				<img v-show="isLook"
					src="https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/账单Icon/向上.svg"
					alt="">
				<!-- 向下 -->
				<img v-show="!isLook"
					src="https://mp-7f09bcd1-475b-4778-8767-52ae180f55ab.cdn.bspapp.com/账单Icon/向下.svg"
					alt="">
			</div>
		</div>



		<!-- 选择icon弹出框 -->
		<van-popup :show="isSelectIcon" position="bottom" custom-style="height: 95%;" @close="isSelectIcon = false">
			<div class="popupShow">
				<div class="popupShow_hender">
					<span :class="active == '01' ? 'active' : ''" @click="cutType('01')">支出</span>
					<span :class="active == '02' ? 'active' : ''" @click="cutType('02')">收入</span>
				</div>
				<div class="popupShow_centent">
					<SelectIcon :dataList='dataList' @addIcon='addIcon' @deleteIocn='deleteIocn' @addBill='addBill'
						:style='style'>
					</SelectIcon>
				</div>
			</div>
		</van-popup>

		<!-- 添加icon -->
		<van-popup :show="isShowAdd" @close="isShowAdd = false" custom-style="height: 40%;width:95%" round>
			<div class="isShowAdd">
				<!-- 上传icon图片 -->
				<div class="isShowAddBox">
					<span>选择Icon</span>
					<van-uploader :file-list="fileList" style="margin-left: 34px;" @delete='delete1' max-count='1'
						@after-read="afterRead" />
				</div>

				<div class="isShowAddBox">
					<span>名称</span>
					<input type="text" v-model="addObj.title" placeholder="请输入名称" class="nameTitle">
				</div>
				<!-- 文字描述 -->
				<!-- <van-field :value="addObj.title" required clearable label="名称" placeholder="请输入名称"
					@change="(e)=>{addObj.title = e.detail}" />
					 -->
				<!-- 确定按钮 -->
				<button class="showAdd_btn" @click="saveIcon">确认</button>
			</div>
		</van-popup>

		<!-- 添加账单弹出框 -->
		<van-popup :show="isShowAdd_bill" @close="isShowAdd_bill = false" custom-style="height: 60%;width:95%" round>
			<div class="isShowAdd1">
				<div style="width: 100%;height: 50%;">
					<!-- 上传icon图片 -->
					<div class="isShowAddBox">
						<span>名称</span>
						<input type="number" v-model="addObj_bill.title" placeholder="请输入金额" class="nameTitle" disabled>
					</div>

					<div class="isShowAddBox">
						<span>类型</span>
						<input type="number" v-model="addObj_bill.typeName" placeholder="请输入金额" class="nameTitle"
							disabled>
					</div>

					<div class="isShowAddBox">
						<span>金额</span>
						<input type="digit" v-model="addObj_bill.money" placeholder="请输入金额" class="nameTitle">
					</div>

					<div class="isShowAddBox">
						<span>备注</span>
						<input type="text" v-model="addObj_bill.remark" placeholder="请输入备注" class="nameTitle">
					</div>

					<div class="isShowAddBox">
						<span>时间</span>
						<input type="text" v-model="addObj_bill.createTime" placeholder="时间显示失败" class="nameTitle"
							disabled @click="showTime">
					</div>
				</div>

				<div style="width: 100%;height: 35%;overflow-y: auto;">
					<p class="title_p" v-if="sameType.length != 0">匹配到同类型 {{sameType.length}} 笔,点击可以合并</p>

					<!-- 同类型数据 -->
					<table class="table" v-if="sameType.length != 0">
						<tr>
							<th>名称</th>
							<th>金额</th>
							<th>备注</th>
						</tr>
						<tr v-for="(item,index) in sameType" :key="index" @click='merge(item)'>
							<td
								:style="{color:`${(item.flag == true || item._id == addObj_bill._id) ? '#999' : 'var(--color) !important'}`}">
								{{item.title}}
							</td>
							<td
								:style="{color:`${(item.flag == true || item._id == addObj_bill._id) ? '#999' : 'var(--color) !important'}`}">
								{{item.type == '01' ? '- $' : '+ $'}}{{(Number(item.money)).toFixed(2)}}
							</td>
							<td
								:style="{color:`${(item.flag == true || item._id == addObj_bill._id) ? '#999' : 'var(--color) !important'}`}">
								{{item.remark}}
							</td>
						</tr>
					</table>
				</div>

				<button class="showAdd_btn" @click="svae">确认</button>
			</div>
		</van-popup>

		<!-- 时间弹出框 -->
		<van-calendar :show="is_showTime" @close="is_showTime = false" @confirm="onConfirm" color='#272322'
			:min-date="minDate"></van-calendar>


		<!-- 时间选择器 -->
		<van-popup :show="show_datetime_picker" @close="show_datetime_picker = false" position="bottom"
			custom-style="height: 40%" round>
			<van-datetime-picker type="year-month" :value="currentDate" @confirm='onInput' :min-date="minDate" />
		</van-popup>
		
		
		<!-- 统计弹出框 -->
		<van-popup :show="is_statistics" position="bottom" custom-style="height: 95%;" @close="is_statistics = false">
			<div class="popupShow">
				<!-- 统计页面  调用子组件-->
				<Statistics :style="style" :monthBill='month_bill' :yearBill='year_bill'></statistics>
			</div>
		</van-popup>



	</div>


</template>

<script>
	import SelectIcon from "./selectIcon"
	import Statistics from "./Statistics"
	export default {
		data() {
			return {
				isSelectIcon: false,

				isShowAdd: false,
				isShowAdd_bill: false,
				is_showTime: false,
				show_datetime_picker: false, //时间选择器

				currentDate: '', //当前选中的值

				minDate: new Date(2024, 6, 1).getTime(),

				active: '01', //默认显示收入

				dataList: [],

				billList: [],

				// 文件列表
				fileList: [],

				addObj: {},
				addObj_bill: {}, //账单对象

				// 当前年月日对象
				timeObj: {
					month: 0,
					year: 0
				},

				// 当前时间
				timeIng: "",

				// 展板数据
				display_board_obj: {
					income: 0,
					amountPaid: 0 //支出
				},

				select: 'header',

				type: '',
				icon_count: 0,

				// 同类型
				sameType: [],
				sameType_processed: [], //已合并账单id

				expenditure_quantity: 0, //支出笔
				income_quantity: 0, //收入笔

				userInfo: {},




				// 当前主题
				at: 'night',
				// 默认主题
				style: {
					'--background': '#262221',
					'--background_box': '#1c1a1b',
					'--color': '#fff',
					'--color_ramk': '#f1f1f1',
					'--image_color': '#333',
					'--box-shadow': '0 0 10px 0 rgba(255, 255, 255, 0.3)'
				},

				isLook: false,
				
				
				// 是否查看统计页面
				is_statistics:false,
				
				
				// 阅读账单
				month_bill:[],
				// 年度帐单
				year_bill:[]

			}

		},

		components: {
			SelectIcon,
			Statistics
		},

		onLoad() {
			this.judge_hour() // 根据时间 判断M默认显示主题
			this.userInfo = uni.getStorageSync('userInfo')
			let date = new Date()

			this.timeObj.year = date.getFullYear()
			this.timeObj.month = date.getMonth() + 1
			this.timeIng = this.repTime(date)

			this.getInit()
		},

		methods: {

			// 获取列表数据
			async getInit() {
				let seach = {
					createTime: this.timeObj.year + '-' + (this.timeObj.month < 10 ? '0' + this.timeObj.month :
						this.timeObj.month)
				}
				let result = await this.$axios('overallSituation', {
					databaseName: "newBill", //数据库名称
					...seach,
					type: this.type,
					state: "look",
					queryId: this.userInfo._id
				}, true)
				
				this.month_bill = result.data
				
				if (result.code == 200) {
					this.billList = this.processing_data(result.data)

					console.log(this.billList, 'billListbillListbillList');
				}
			},

			// 处理数据
			processing_data(array) {

				this.expenditure_quantity = 0 //指数笔树
				this.income_quantity = 0 //收入笔数

				if (array.length == 0) {
					this.display_board_obj.income = '0.00'
					this.display_board_obj.amountPaid = '0.00'
					return []
				}

				// 初始化看板数据
				this.display_board_obj.income = 0
				this.display_board_obj.amountPaid = 0

				let data = []

				array.forEach(item => {
					if (data.length == 0) {
						let obj = {
							createTime: item.createTime,
							// 收入
							income: 0,
							// 支出
							amountPaid: 0,
							list: []
						}
						obj.list.push(item)
						if (item.type == '01') {
							obj.amountPaid += Number(item.money)
							this.expenditure_quantity++
						} else {
							obj.income += Number(item.money)
							this.income_quantity++
						}
						data.push(obj)
					} else {
						let flag = true
						data.forEach(row => {
							if (item.createTime == row.createTime) {
								if (item.type == '01') {
									row.amountPaid += Number(item.money)
									this.expenditure_quantity++
								} else {
									row.income += Number(item.money)
									this.income_quantity++
								}

								row.list.push(item)


								flag = false
							}
						})

						if (flag) {
							let obj = {
								createTime: item.createTime,
								// 收入
								income: 0,
								// 支出
								amountPaid: 0,
								list: []
							}
							obj.list.push(item)
							if (item.type == '01') {
								obj.amountPaid += Number(item.money)
								this.expenditure_quantity++
							} else {
								obj.income += Number(item.money)
								this.income_quantity++
							}

							data.push(obj)
						}
					}
				})

				data.forEach(item => {
					this.display_board_obj.income = Number(this.display_board_obj.income) + item.income //收入
					this.display_board_obj.amountPaid = Number(this.display_board_obj.amountPaid) + item.amountPaid
				})

				// 保留两位小数
				this.display_board_obj.income = (this.display_board_obj.income).toFixed(2)
				this.display_board_obj.amountPaid = (this.display_board_obj.amountPaid).toFixed(2)
				return data
			},

			// 点击支出 或者 收入
			click_zc_sr(type) {

				if (this.type == type) {
					this.type = ''
				} else {
					this.type = type
				}

				console.log(this.type, 'this.type');

				this.getInit()
			},

			// 点击左箭头
			last() {
				// 月份 - 1
				this.timeObj.month -= 1
				if (this.timeObj.month <= 0) {
					this.timeObj.month = 12
					this.timeObj.year -= 1
				}
				console.log(this.timeObj, 'this.timeObj.money');

				this.getInit()
			},

			// 点击右箭头
			next() {
				// 月份 - 1
				this.timeObj.month += 1
				if (this.timeObj.month > 12) {
					this.timeObj.month = 1
					this.timeObj.year += 1
				}

				this.getInit()
			},
			
			// 点击统计按钮
			async lookStatistics(){
				
				// 获取年度账单
				let result = await this.$axios('overallSituation', {
					databaseName: "newBill", //数据库名称
					type: this.type,
					state: "look",
					createTime:this.timeObj.year.toString(),
					queryId: this.userInfo._id
				}, true)
				
				this.year_bill = result.data
				
				this.is_statistics = true
			},

			// 修改账单
			editBill(item) {
				console.log(item, 'item');
				this.sameType = []
				this.addObj_bill = item

				this.getSameType({
					createTime: this.addObj_bill.createTime,
					type: this.addObj_bill.type,
					title: this.addObj_bill.title
				})
				this.isShowAdd_bill = true
			},

			// 点击顶部时间
			selectHeader() {
				// 显示时间选择器
				this.show_datetime_picker = true
			},

			onInput(e) {
				// console.log(e.detail);  时间戳
				let date = new Date(e.detail)
				console.log(date.getFullYear());
				console.log(date.getMonth() + 1);
				this.timeObj.year = date.getFullYear()
				this.timeObj.month = date.getMonth() + 1
				this.show_datetime_picker = false
				this.getInit()
			},

			// 点击记一笔
			showSelectIcon() {
				this.isSelectIcon = true
				this.cutType()
			},

			// 切换主题
			vutTheme() {
				if (this.at == 'daytime') {
					// 切换到夜晚主题
					this.style['--background'] = '#262221'
					this.style['--background_box'] = '#1c1a1b'
					this.style['--color'] = '#fff'
					this.style['--color_ramk'] = '#f1f1f1'
					this.style['--image_color'] = '#fff'
					this.style['--box-shadow'] = '0 0 10px 0 rgba(255, 255, 255, 0.3)'

					this.at = 'night'
				} else {
					this.style['--background'] = '#f1f1f1'
					this.style['--background_box'] = '#fff'
					this.style['--color'] = '#333'
					this.style['--color_ramk'] = '#666'
					this.style['--image_color'] = '#333'
					this.style['--box-shadow'] = '0 0 10px 0 rgba(0, 0, 0, 0.3)'

					this.at = 'daytime'
				}
			},

			// 页面首次加载 获取当前时间 判断显示那个主题
			judge_hour() {
				// 获取当前小时
				let hour = new Date().getHours()
				if (hour >= 18 || hour <= 6) {
					// 晚上
					this.style['--background'] = '#262221'
					this.style['--background_box'] = '#1c1a1b'
					this.style['--color'] = '#fff'
					this.style['--color_ramk'] = '#f1f1f1'
					this.style['--image_color'] = '#fff'
					this.style['--box-shadow'] = '0 0 10px 0 rgba(255, 255, 255, 0.3)'

					this.at = 'night'
				} else {
					// 早上
					this.style['--background'] = '#f1f1f1'
					this.style['--background_box'] = '#fff'
					this.style['--color'] = '#333'
					this.style['--color_ramk'] = '#666'
					this.style['--image_color'] = '#333'
					this.style['--box-shadow'] = '0 0 10px 0 rgba(0, 0, 0, 0.5)'

					this.at = 'daytime'
				}
			},

			// 长安删除这一笔记账
			longpress(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除这一笔记账吗？',
					confirmText: "删除", //这块是确定按钮的文字
					cancelText: "取消", //这块是取消的文字
					success: function(res) {
						if (res.confirm) {
							that.$axios('overallSituation', {
								databaseName: "newBill", //数据库名称
								...item,
								state: "delete"
							}, true).then(result => {
								if (result.code == 200) {
									uni.showToast({
										title: "删除成功",
										icon: "none",
										duration: 2000
									})
									that.getInit()
								} else {
									uni.showToast({
										title: "删除失败",
										icon: "none",
										duration: 2000
									})
								}
							})
						}
					}
				})
			},

			// 点击 收入 支出
			async cutType(number = '01') {
				this.active = number
				let res = await this.$axios('overallSituation', {
					databaseName: 'icon',
					state: "look",
					active: this.active
				}, true)

				console.log(this.active, 'active');

				if (res.code == 200) {
					// this.dataList = res.data
					this.dataList = res.data.sort((a, b) => (b.count || 0) - (a.count || 0));
				}
			},

			// 添加icon
			addIcon() {
				this.addObj = {}
				this.fileList = []
				this.isShowAdd = true
			},

			// 文件上传成功的钩子
			afterRead(event) {
				console.log(event);
				this.fileList.push({
					url: event.detail.file.url
				})
			},

			// 删除图片
			delete1(event) {
				this.fileList.splice(event.detail.index, 1)
			},

			// 删除Icon 数据
			async deleteIocn(item) {
				let res = await this.$axios('overallSituation', {
					databaseName: 'icon',
					state: "delete",
					...item
				})
				this.cutType(this.active)
			},

			// 保存icon
			async saveIcon() {

				// 判断是否上传了封面 , 并且不能是已上传的图片
				if (this.fileList.length != 0 && !this.fileList[0].url.includes('https://')) {
					// 上传图片
					let result = await uniCloud.uploadFile({
						filePath: this.fileList[0].url,
						cloudPath: "icon.svg",
						header: {
							"Content-Type": "multipart/form-data"
						},
					})

					let bas64 = result.fileID;
					this.addObj.image = bas64
				} else {
					uni.showToast({
						title: "已有图片或者图片是https格式",
						icon: "none",
						duration: 2000
					})
				}



				let res = await this.$axios('overallSituation', {
					databaseName: 'icon',
					state: "add",
					...this.addObj,
					active: this.active
				})

				if (res.code == 200) {
					uni.showToast({
						title: "添加成功",
						icon: "none",
						duration: 2000
					})
					this.cutType()
				} else {
					uni.showToast({
						title: "添加失败",
						icon: "none",
						duration: 2000
					})
				}
				this.isShowAdd = false

			},

			// 点击icon添加账单
			addBill(item) {
				this.addObj_bill = {}
				// 获取当前时间
				let date = new Date()
				// 处理时间
				this.addObj_bill.createTime = this.repTime(date)
				this.addObj_bill.iconImage = item.image //icon
				this.addObj_bill.title = item.title //标题
				this.addObj_bill.type = item.active //类型
				this.addObj_bill.iconId = item._id //id
				this.addObj_bill.typeName = item.active == '01' ? '支出' : '收入' //类型

				this.icon_count = item.count ? item.count + 1 : 1
				// 获取时分秒
				let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
				let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()

				this.addObj_bill.time = h + ':' + m

				// 获取同类型账单
				this.getSameType({
					createTime: this.addObj_bill.createTime,
					type: this.addObj_bill.type,
					title: this.addObj_bill.title
				})

				this.isShowAdd_bill = true
			},

			// 查询同类型同笔账单
			async getSameType(data) {
				this.sameType_processed = []
				console.log(data, 'data');
				let result = await this.$axios('overallSituation', {
					databaseName: "newBill", //数据库名称
					...data,
					queryId: this.userInfo._id,
					state: "look"
				})

				let newArray = []
				result.data.forEach(item => {

					if (item._id != this.addObj_bill._id) {
						newArray.push({
							...item,
							flag: false
						})
					}
				})

				this.sameType = newArray

			},

			// 合并
			merge(item) {
				if (item.flag || item._id == this.addObj_bill._id) {
					uni.showToast({
						title: '数据已合并或与当前账单编号相同',
						duration: 2000,
						icon: "none"
					})
					return
				}
				// 判断 当前金额 是否有值
				if (this.addObj_bill.money) {
					let that = this
					uni.showModal({
						title: '提示',
						content: '确定要进行账单合并吗？',
						confirmText: "合并", //这块是确定按钮的文字
						cancelText: "取消", //这块是取消的文字
						success: function(res) {
							if (res.confirm) {
								that.addObj_bill.money = (Number(that.addObj_bill.money) + Number(item.money))
									.toFixed(2)
								that.addObj_bill.remark = that.addObj_bill.remark + ',' + item.remark
								// that.addObj_bill._id = item._id
								let date = new Date()
								let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
								let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
								that.addObj_bill.time = h + ':' + m
								item.flag = true
								that.sameType_processed.push(item._id)
							}
						}
					})
				} else {
					uni.showToast({
						title: '请输入金额',
						icon: 'none',
						duration: 2000
					})
				}
			},

			// 点击选择时间
			showTime() {
				this.is_showTime = true
			},

			// 确定选择时间
			onConfirm(e) {
				console.log(e);
				let date = new Date(e.detail)
				// 处理时间
				this.addObj_bill.createTime = this.repTime(date)
				this.is_showTime = false
			},

			// 处理时间格式
			repTime(date) {
				if (date) {
					let year = date.getFullYear().toString()
					let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
					let _date = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()

					return year + '-' + month + '-' + _date
				} else {
					return '----'
				}
			},

			// 确认按钮 记账
			async svae() {
				uni.showLoading({
					title: 'Loding'
				})
				let result = await this.$axios('overallSituation', {
					databaseName: "newBill", //数据库名称
					...this.addObj_bill,
					queryId: this.userInfo._id,
					state: this.addObj_bill._id ? 'update' : "add"
				})

				if (result.code == 200) {
					uni.showToast({
						icon: 'none',
						title: this.addObj_bill._id ? '修改成功' : "记账成功",
						duration: 2000
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: this.addObj_bill._id ? '修改失败' : "记账失败",
						duration: 2000
					})
				}

				// 记录这次icon使用情况
				this.$axios('overallSituation', {
					databaseName: 'icon',
					state: "update",
					_id: this.addObj_bill.iconId,
					count: this.icon_count
				})

				// 删除已合并账单
				for (let i = 0; i < this.sameType_processed.length; i++) {
					let item = this.sameType_processed[i]
					await this.$axios('overallSituation', {
						databaseName: "newBill", //数据库名称
						_id: item,
						state: "delete"
					})
				}

				this.isShowAdd_bill = false
				this.isSelectIcon = false

				uni.hideLoading()
				// 返回列表
				this.getInit()

			},

		}


	}
</script>


<style scoped lang="less">
	.box {
		position: relative;
		overflow: hidden;
		transition: all 0.5s linear;
	}

	.header_time {
		width: 100%;
		height: 6%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
		box-sizing: border-box;
		background: var(--background) !important;
		// background: var(--color) !important;
		margin-bottom: 10px;
		transition: all 0.5s linear;
	}

	.header_time .left,
	.header_time .right {
		width: 23%;
		height: 100%;
		color: var(--color) !important;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		transition: all 0.5s linear;
	}

	.header_time .right {
		justify-content: flex-end;
	}

	.header_time .left img,
	.header_time .right img {
		height: 30px;
		width: 30px;
		color: var(--color) !important;
		transition: all 0.5s linear;
	}

	.header_time .time {
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		color: var(--color) !important;
		transition: all 0.5s linear;
	}

	.header_time .time strong {
		font-size: 16px;
	}

	.header_time .time p {
		font-size: 12px;
		color: var(--color_ramk) !important;
		transition: all 0.5s linear;
	}

	.inc_exp_mone {
		width: 100%;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: var(--background_box);
		padding: 10px 0;
		box-sizing: border-box;
		transition: all 0.5s linear;
	}

	.inc_exp_mone .inc,
	.inc_exp_mone .exp {
		width: 48%;
		height: 100%;
		border-radius: 10px;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
		padding: 10px;
		box-sizing: border-box;
		background: var(--background) !important;
		display: flex;
		flex-direction: column;
		transition: all 0.5s linear;
		justify-content: center;
	}

	.inc_exp_mone .inc .inc_exp_title,
	.inc_exp_mone .exp .inc_exp_title {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.inc_exp_mone .inc .inc_exp_title img,
	.inc_exp_mone .exp .inc_exp_title img {
		width: 30px;
		height: 30px;
	}

	.inc_exp_mone .inc .inc_exp_title span,
	.inc_exp_mone .exp .inc_exp_title span {
		color: var(--color) !important;
		font-size: 20px;
		font-weight: 700;
		margin-left: 10px;
	}

	.inc_exp_mone .inc .number,
	.inc_exp_mone .exp .number {
		font-size: 26px;
		font-weight: 700;
		transition: all 0.5s linear;
		color: var(--color) !important;
	}

	.list {
		width: 100%;
		height: 74%;
		overflow-y: auto;
		padding: 10px 0;
		box-sizing: border-box;
	}

	.list li {
		width: 100%;
		margin-bottom: 10px;

	}

	.list li .time_class {
		width: 100%;
		height: 30%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: var(--color) !important;
		font-size: 14px;
		padding: 0 10px;
		box-sizing: border-box;
		transition: all 0.5s linear;
		margin-bottom: 5px;
	}

	.list li .detail {
		width: 100%;
		height: 65px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		box-sizing: border-box;
		background-color: var(--background) !important;
		transition: all 0.5s linear;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.list li .detail .image {
		height: 80%;
		width: 15%;

	}

	.list li .detail .image image {
		width: 100%;
		height: 100%;
		fill: currentColor;
		color: var(--image_color) !important;
		transition: all 0.5s linear;
	}

	.list li .detail .centent {
		width: 55%;
		height: 100%;
		transition: all 0.5s linear;
		color: var(--color) !important;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.list li .detail .centent h3 {
		font-size: 16px;
		font-weight: 700;
		color: var(--color);
	}

	.list li .detail .centent h3 span {
		font-size: 12px;
		font-weight: 700;
		transition: all 0.5s linear;
		color: var(--color_ramk);
		margin-left: 10px;
	}

	.list li .detail .centent p {
		font-size: 12px;
		color: var(--color_ramk);
		transition: all 0.5s linear;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.list li .detail .number {
		width: 30%;
		height: 100%;
		color: var(--color) !important;
		font-weight: 700;
		transition: all 0.5s linear;
		text-align: center;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		flex-direction: column;
		border-left: 1px solid var(--color_ramk) !important;
	}

	.list li .detail .number h3 {
		font-size: 14px;
		margin-bottom: 5px;
	}

	.list li .detail .number p {
		font-size: 12px;
		font-weight: 400;
	}

	.addbtn {
		position: absolute;
		bottom: 40px;
		right: 5px;
		width: 100px;
		height: 50px;
		border-radius: 10px;
		background: rgba(105, 219, 124, 0.4);
		color: var(--color) !important;
		font-weight: 700;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.5s linear;
	}



	.popupShow {
		width: 100%;
		height: 100%;
		background-color: var(--background_box);
		transition: all 0.5s linear;
		overflow: hidden;
	}

	.popupShow .popupShow_hender {
		width: 100%;
		height: 6%;
		background: var(--background);
		color: var(--color) !important;
		display: flex;
		align-items: center;
		transition: all 0.5s linear;
		justify-content: center;
	}

	.popupShow .popupShow_hender span {
		display: inline-block;
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.5s linear;
		box-sizing: border-box;
	}

	.popupShow .popupShow_centent {
		width: 100%;
		height: 94%;
		/* overflow-y: auto; */
		/* background-color: red; */
		overflow: hidden;
	}

	.popupShow .popupShow_hender .active {
		border-bottom: 2px solid #DD3636;
	}

	.isShowAdd {
		width: 100%;
		height: 100%;
		background: var(--background_box);
		padding: 10px;
		box-sizing: border-box;
		overflow: hidden;
		transition: all 0.5s linear;
	}

	.isShowAdd .isShowAddBox {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 5px 0;
		box-sizing: border-box;
		background-color: var(--background_box);
		transition: all 0.5s linear;
	}

	.isShowAdd .isShowAddBox span {
		font-size: 14px;
		color: var(--color) !important;
		width: 20%;
		height: 100%;
		display: inline-block;
		text-align: right;
		line-height: 100%;
		transition: all 0.5s linear;
	}

	.isShowAdd .nameTitle {
		margin-left: 34px;
		height: 100%;
		background: var(--background_box);
		color: var(--color) !important;
		border: none;
		font-size: 12px;
		font-weight: 700;
		transition: all 0.5s linear;
	}

	.showAdd_btn {
		margin-top: 20px;
		width: 95%;
		height: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color) !important;
		background: var(--background);
		font-size: 12px;
		font-weight: 700;
		margin-bottom: 10px;
		/* position: fixed;
		bottom: 10px; */
		transition: all 0.5s linear;
	}

	.isShowAdd1 {
		width: 100%;
		height: 100%;
		background: var(--background_box);
		padding: 10px;
		box-sizing: border-box;
		overflow: hidden;
		/* overflow-y: auto; */
		transition: all 0.5s linear;
	}

	.isShowAdd1 .isShowAddBox {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		padding: 5px 0;
		box-sizing: border-box;
		background-color: var(--background);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.5s linear;
	}

	.isShowAdd1 .isShowAddBox span {
		font-size: 14px;
		color: var(--color) !important;
		transition: all 0.5s linear;
		width: 20%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.isShowAdd1 .nameTitle {
		margin-left: 34px;
		height: 100%;
		width: 80%;
		background: var(--background);
		color: var(--color) !important;
		border: none;
		font-size: 12px;
		font-weight: 700;
		transition: all 0.5s linear;
	}


	.list .empty {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		color: var(--color) !important;
		font-weight: 700;
		font-size: 14px;
		flex-direction: column;
		transition: all 0.5s linear;
	}

	.empty img {
		height: 50%;
		width: 50%;
		margin-bottom: 10px;
	}

	.active_boxKb {
		// box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.3) !important;
		box-shadow: var(--box-shadow) !important;
	}

	.title_p {
		width: 100%;
		font-weight: 700;
		font-size: 14px;
		transition: all 0.5s linear;
		color: var(--color) !important;
		margin-top: 10px;
	}

	.table {
		width: 100%;
		border-spacing: 0;
	}

	.table tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.table tr th,
	.table tr td {
		width: 33%;
		height: 35px;
		text-align: center;
		line-height: 35px;
		font-size: 14px;
		color: var(--color) !important;
		border-bottom: 1px solid var(--color) !important;
		transition: all 0.5s linear;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;

	}

	.showAdd_btn_active {
		position: fixed;
		bottom: 10px;
	}

	.daytime {
		color: #333;
		background: var(--color) !important;
		transition: all 0.5s linear;
	}

	.control_panel {
		width: 50px;
		height: 50px;
		background: rgba(0, 0, 0, 0.4);
		color: var(--color);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 40px;
		right: 10px;
		overflow: hidden;
		border-radius: 30px;
		transition: all 0.5s linear;
		// box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
		box-shadow: var(--box-shadow) !important;
	}

	.control_panel .lookAll {
		width: 50px;
		height: 50px;
		background: #fff; //按钮颜色 写死的 
		position: absolute;
		bottom: 0;
		left: 0;
		overflow: hidden;
		border-radius: 50%;
	}

	.control_panel .lookAll img {
		width: 100%;
		height: 100%;
		transition: all 0.5s linear;
	}

	.control_panel .phanerozoite {
		overflow: hidden;
		height: calc(100% - 50px);
		width: 100%;
		color: var(--color);
		transition: all 0.5s linear;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		position: absolute;
		top: 0;
		left: 0;
	}

	.control_panel .phanerozoite img {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		// margin-bottom: 10px;
		background: #fff;
	}
</style>